<template>
  <c-model
    title="订单详情"
    v-model="show"
    width="620px"
    custom-class="order-detail-model"
    btnPosition="center"
    confirm-text="确认"
    @confirm="show = false"
    :showCancelBtn="false"
  >
    <template v-if="order">
      <div class="device-box">
        <c-image :url="order.logo" alt="" :lazy="false" />
        <div class="device-info">
          <div class="item">
            <div class="name">{{ order.equipmentName }}</div>
            <div class="labels">
              <span>原价{{ order.cashMoney }}</span>
            </div>
          </div>
          <div class="item">
            <div>品类：{{ order.typeName }}</div>
            <div>描述：{{ order.title }}</div>
          </div>
          <div class="item">
            <div class="status">
              <img
                :src="statusOptions[order.status].icon"
                alt=""
                class="status-icon"
              />
              {{ statusOptions[order.status].label }}
            </div>
          </div>
        </div>
      </div>
      <div class="order-info cell-group">
        <div class="cell">
          <div class="label">订单号</div>
          <div class="con">{{ order.orderNumber }}</div>
        </div>
        <div class="cell">
          <div class="label">支付时间</div>
          <div class="con">{{ order.payTime }}</div>
        </div>
        <div class="cell">
          <div class="label">创建时间</div>
          <div class="con">{{ order.createTime }}</div>
        </div>
        <div class="cell">
          <div class="label">归还时间</div>
          <div class="con">{{ order.finishTime || "--" }}</div>
        </div>
      </div>
      <div class="bold">计费</div>
      <div class="billing-info cell-group">
        <div class="cell">
          <div class="label">支付金额</div>
          <div class="con">￥{{ order.money }}</div>
        </div>
        <div class="cell">
          <div class="label">租赁时长</div>
          <div class="con">{{ order.hours }}</div>
        </div>
        <div class="cell">
          <div class="label">优惠金额</div>
          <div class="con">￥{{ order.disPrice }}</div>
        </div>
      </div>
      <div class="total-money mt-12 flex col-center row-end">
        <span class="fz-12 color-gray">{{ order.remark }}</span>
        <span>退款金额:<label>￥<span class="price">{{ order.money }}</span></label></span>
      </div>
    </template>
  </c-model>
</template>
<script>
export default {
  name: "orderDetail",
  props: {
    value: { type: Boolean, default: false },
    order: { type: Object, default: null },
  },
  data() {
    return {
      statusOptions: {
        1: {
          label: "待支付",
          icon: require("@/assets/images/lease/status-1.png"),
        },
        2: {
          label: "待配送",
          icon: require("@/assets/images/lease/status-2.png"),
        },
        3: {
          label: "租赁中",
          icon: require("@/assets/images/lease/status-3.png"),
        },
        4: {
          label: "待回收",
          icon: require("@/assets/images/lease/status-4.png"),
        },
        5: {
          label: "已回收",
          icon: require("@/assets/images/lease/status-5.png"),
        },
        6: {
          label: "已退款",
          icon: require("@/assets/images/lease/status-6.png"),
        },
      },
    };
  },
  computed: {
    show: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
  },
  methods: {},
  created() {},
  watch: {},
};
</script>

<style scoped lang="scss">
.order-detail-model {
  .device-box {
    @include flex_between;
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 12px;

    .c-image {
      width: 56px !important;
      height: 56px !important;
      border-radius: 4px;
      border: 1px solid #f4f4f4;
    }

    .device-info {
      @include flex_between;
      align-items: center;
      flex: 1;
      margin-left: 16px;

      .item {
        &:last-child {
          text-align: right;
        }

        .labels {
          display: flex;
          align-items: center;

          span {
            display: inline-block;
            height: 16px;
            font-size: 10px;
            line-height: 16px;
            padding: 0 4px;
            border: 1px solid $-color-orange;
            color: $-color-orange;
          }
        }
      }
      .status-icon {
        width: 16px;
        height: 16px;
        vertical-align: -3px;
      }
    }
  }

  .cell-group {
    &.order-info {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      border-bottom: 1px solid #f4f4f4;
      margin-bottom: 12px;
      .cell {
        padding: 6px 0;
        font-size: 13px;
        .label {
          color: $-color-gray;
          margin-right: 10px;
        }
      }
    }
    &.billing-info {
      .cell {
        @include flex_between;
        padding: 8px 12px;
        &:nth-child(even) {
          background: #f7f7f7;
        }
      }
    }

    .cell {
      display: flex;
      align-items: center;
    }
  }
  .total-money {
    border-top: 1px solid #f4f4f4;
    padding-top: 12px;
    label {
      color: $-color-brown;
      .price {
        font-family: changchun1hao;
        font-size: 24px;
        line-height: 24px;
      }
    }
  }
}
</style>
